<template>
    <div class="flc">
        <div v-for="item in 5" :class="'module'+item">
            <p>总数</p>
            <p>{{item}}</p>
        </div>
    </div>
    <div class="charts">
		<div>
			<commonCharts :option="option1"/>
		</div>
		<div>
			<commonCharts :option="option2"/>
		</div>
		
		
	</div>
    <div class="table-c">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="用户名">
      <el-input v-model="formInline.user" placeholder="Approved by" clearable />
    </el-form-item>
    <el-form-item label="籍贯">
      <el-select
        v-model="formInline.region"
        placeholder="Activity zone"
        clearable
      >
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker
        v-model="formInline.date"
        type="date"
        placeholder="Pick a date"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit">查询</el-button>
    </el-form-item>
  </el-form>
    <el-button @click="refreshTable">刷新</el-button>

    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="Date" width="180" />
        <el-table-column prop="name" label="Name" width="180" />
        <el-table-column prop="address" label="Address" />
    </el-table>
    <el-pagination
      v-model:current-page="currentPage"
      :page-size="pageSize"
      :small="small"
      
      layout="total, prev, pager, next"
      :total="1000"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    </div>
    <h2>新闻</h2>
    
    <p>组件学习</p>
    <div>
        <fa>
            <h3>sun</h3>
        </fa>
        <tool/>
    </div>
    <div class="list">
        <virList />
    </div>
    
	<detail ref="dialog" @confirmDia="confirmDia"/>
	
	  <el-button @click="open" type="primary">打开弹窗</el-button>
</template>
<script lang="ts" setup>
import {ref,reactive} from 'vue'
import fa from './components/fa.vue'
import tool from './components/tool.vue'
import virList from './components/virList.vue'
import commonCharts from '@/components/commonCharts/index.vue'
import detail from './components/detail.vue'
let dialog = ref<InstanceType<typeof detail> | null>(null)

const open = (): void => {
    dialog.value?.openDia()
}
const confirmDia = (val: string): void => {
  console.log(val)
  dialog.value?.closeDia()
}


const option1=ref({
	 xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: 'line'
	    }
	  ]
})
const option2=ref({
	 xAxis: {
	    type: 'category',
	    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
	  },
	  yAxis: {
	    type: 'value'
	  },
	  series: [
	    {
	      data: [150, 230, 224, 218, 135, 147, 260],
	      type: 'bar'
	    }
	  ]
})
const formInline = reactive({
  user: '',
  region: '',
  date: '',
})

const onSubmit = () => {
  console.log('submit!')
}
const currentPage = ref(5)
const pageSize = ref(3)


const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  tableData.value=[{
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  }]
}
const tableData =ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
])
function refreshTable(){
    tableData.value=[]
}
</script>
<style scoped lang="scss">
.frameContainer{
    width: 100%;
    /* height: 100%; */
    height: 782px;
}
.list{
    width: 100%;
    background: #ccc;
}
.list div{
    margin: 0 auto;
    width: 200px;
}
.table-c{
    padding:20px;
}
.flc{
    margin-top:10px;
    display:flex;
    flex-direction:row;
    justify-content: space-around;
}
.flc div{
    width:300px;
    text-align:center;
    border-radius:4px;
    border:1px solid #ccc;
    height:100px;
    padding-top:20px;
    opacity:0.8;
    p{
        line-height:30px;
            color:#fff;
            font-size:18px;
    }
}
.flc div:hover{
    opacity:1;
}
.module1{
    background-image: linear-gradient( 135deg, #65FDF0 10%, #1D6FA3 100%);
}
.module2{
    background-image: linear-gradient( 135deg, #FFE985 10%, #FA742B 100%);
}
.module3{
    background-image: linear-gradient( 135deg, #72EDF2 10%, #5151E5 100%);
}
.module4{
    background-image: linear-gradient( 135deg, #70F570 10%, #49C628 100%);
}
.module5{
    background-image: linear-gradient( 135deg, #FF96F9 10%, #C32BAC 100%);
}
.charts{
	display: flex;
	flex-direction: row;
	width: 100%;
	div{
		min-width: 500px;
		width: 40%;
		height:400px;
	}
	
}
</style>
